<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getElementsByClassName</title>
		<script type="text/javascript">
			// var   /vɑr/
			// alert   /əˈlɜːrt/
			// document  /ˈdɒkjumənt/ 
			// onload   /ˌɒnˈləʊd/
			// getElementsByClassName   /ɡet  elɪmənt  baɪ  klæs  neɪm/ 
			
			
			// getElementsByClassName("class名") 
			// 功能：获取相同class名的所有元素节点
			// 返回值：Object---伪数组
			// 【注意】IE8不兼容getElementsByClassName
			
			window.onload = function(){
				// var Odiv0 = document.getElementsByClassName("div0");
				// alert(Odiv0.length);    //2
				//因为可能有多个同一class名的元素节点，所以这里的节点可能不止一个，
				//所以不能以Odiv0.id输出属性节点，而是以数组的形式输出属性节点----Odiv0[0].id
				//整体的属性节点获取和赋值都和 getElementById 方法是一样的。
				// alert(Odiv0[0].id);     //div1
				
				
				//套用的形式
				//自己套自己
				// var Odiv0 = document.getElementsByClassName("div0");
				// var Oli0 = document.getElementsByClassName("li0");
				// alert(Oli0.length);
				// for(let i=0; i<Oli0.length; i++){
				// 	alert(Oli0[i].id);
				// }
				
				//和其他获取方式套用
				//【注】getElementById 和 getElementsByName 的对象只能是 document 对象
				var Odiv0 = document.getElementById("div2");
				var Oli0 = Odiv0.getElementsByClassName("li0");
				alert(Oli0[1].id);   
			}
		</script>
	</head>
	<body>
		<div class="div0" id="div1">
			这里是div1
		</div>
		
		<div class="div0" id="div2">
			<li class = "li0" id="li1">这里是div2中的li1</li>
			<li class = "li0" id="li2">这里是div2中的li2</li>
			<li class = "li0" id="li3">这里是div2中的li3</li>
		</div>
	</body>
</html>
